﻿@page "/buttons/dropdown-menu"

@using Syncfusion.Blazor.SplitButtons

@inherits SampleBaseComponent

<SampleDescription>
   <p>This sample demonstrates the default functionalities of the DropDownButton component. Clicking DropDownButton component will display popup with list of action items.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>DropDownButton</code> component is used to toggle contextual overlays for displaying list of action items. It can contain both text and images.</p>
    <p>In this sample, DropDownButton contains icon, content and list of action items, and can be added using
        <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfDropDownButton~IconCss.html">IconCss</a>,
        <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfDropDownButton~Content.html">Content</a> and
        <a target = ""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.SplitButtons.SfDropDownButton~Items.html">Items</a> property.
    </p>
    <p>More information about Blazor DropDownButton component can be found in this <a target = ""_blank"" href="https://blazor.syncfusion.com/documentation/drop-down-menu/getting-started/">documentation section</a>.</p>
</ActionDescription>


<div class="control-section">
    <div class="button-section">
        <div id="button-control">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <SfDropDownButton IconCss="e-ddb-icons e-profile">
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem>
                            <DropDownMenuItem Text="Notifications" IconCss=@NOTIFICATION></DropDownMenuItem>
                            <DropDownMenuItem Text="User Settings" IconCss=@SETTINGS></DropDownMenuItem>
                            <DropDownMenuItem Text="Log Out" IconCss=@LOGOUT></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfDropDownButton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <SfDropDownButton Content="Profile">
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem>
                            <DropDownMenuItem Text="Notifications" IconCss=@NOTIFICATION></DropDownMenuItem>
                            <DropDownMenuItem Text="User Settings" IconCss=@SETTINGS></DropDownMenuItem>
                            <DropDownMenuItem Text="Log Out" IconCss=@LOGOUT></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfDropDownButton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <SfDropDownButton Content="Profile" IconCss="e-ddb-icons e-profile">
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem>
                            <DropDownMenuItem Text="Notifications" IconCss=@NOTIFICATION></DropDownMenuItem>
                            <DropDownMenuItem Text="User Settings" IconCss=@SETTINGS></DropDownMenuItem>
                            <DropDownMenuItem Text="Log Out" IconCss=@LOGOUT></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfDropDownButton>
                </div>
                <div class="col-xs-12 col-sm-12 col-lg-6 col-md-6">
                    <SfDropDownButton Content="Profile" CssClass="e-caret-hide">
                        <DropDownMenuItems>
                            <DropDownMenuItem Text="Dashboard" IconCss=@DASHBOARD></DropDownMenuItem>
                            <DropDownMenuItem Text="Notifications" IconCss=@NOTIFICATION></DropDownMenuItem>
                            <DropDownMenuItem Text="User Settings" IconCss=@SETTINGS></DropDownMenuItem>
                            <DropDownMenuItem Text="Log Out" IconCss=@LOGOUT></DropDownMenuItem>
                        </DropDownMenuItems>
                    </SfDropDownButton>
                </div>
            </div>
        </div>
    </div>
</div>
@code {
    const string DASHBOARD = "e-ddb-icons e-dashboard";
    const string NOTIFICATION = "e-ddb-icons e-notifications";
    const string SETTINGS = "e-ddb-icons e-settings";
    const string LOGOUT = "e-ddb-icons e-logout";
}
<style>
    #button-control {
        width: 100%;
        margin: 11% 0;
        text-align: center;
    }

    .button-section {
        width: 80%;
        margin: auto;
    }

    #button-control .col-xs-12 {
        margin: 15px 0;
    }

    @@media only screen and (max-width: 500px) {
        #button-control .col-lg-6 {
            margin-bottom: 30px;
        }
    }

    @@media only screen and (min-width: 1200px) {
        #button-control .col-lg-6 {
            width: 25%;
        }
    }

    @@font-face {
        font-family: 'e-ddb-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-ddb-icons {
        font-family: 'e-ddb-icons';
        speak: none;
        font-size: 55px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .e-logout::before {
        content: "\e702";
    }

    .e-dashboard::before {
        content: "\e704";
    }

    .e-profile::before {
        content: "\e703";
    }

    .e-notifications::before {
        content: "\e700";
    }

    .e-settings::before {
        content: "\e701";
    }

    .material .e-logout::before,
    .bootstrap .e-logout::before {
        content: "\e706";
    }

    .material .e-dashboard::before,
    .bootstrap .e-dashboard::before {
        content: "\e708";
    }

    .material .e-profile::before,
    .bootstrap .e-profile::before {
        content: "\e709";
    }

    .material .e-notifications::before,
    .bootstrap .e-notifications::before {
        content: "\e707";
    }

    .material .e-settings::before,
    .bootstrap .e-settings::before {
        content: "\e705";
    }
</style>
